<template>
  <div class="app-container">
    <!-- 页面内容 -->
    <div class="content">
      <!-- 地址选择区域 -->
      <div class="address-section">
        <h3>收货地址</h3>
        <div class="current-address" @click="showAddressModal">
          <div v-if="selectedAddress">
            <div class="recipient-info">
              <span class="name">{{ selectedAddress.name }}</span>
              <span class="phone">{{ formatPhone(selectedAddress.phonenumber) }}</span>
            </div>
            <div class="address-details">
              <i class="fa fa-map-marker"></i>
              <span>{{ selectedAddress.levelOneName }}{{
                  selectedAddress.levelTwoName
                }}{{ selectedAddress.levelThreeName }}{{ selectedAddress.levelFourName }}{{
                  selectedAddress.address
                }}</span>
            </div>
          </div>
          <div v-else class="empty-address">
            <span>请选择收货地址</span>
            <i class="fa fa-chevron-right"></i>
          </div>
        </div>
      </div>

      <!-- 其他订单信息区域 -->
      <div class="order-details">
        <!-- 商品列表、价格等信息 -->
      </div>
    </div>

    <!-- 地址选择模态框 -->
    <div class="modal-overlay" v-if="isAddressModalVisible" @click="closeAddressModal"></div>
    <div class="address-modal" v-show="isAddressModalVisible">
      <div class="modal-header">
        <h3>选择收货地址</h3>
        <button class="close-btn" @click="closeAddressModal">
          <i class="fa fa-times"></i>
        </button>
      </div>

      <div class="modal-body">
        <!-- 地址列表 -->
        <div class="address-list">
          <div
            v-for="address in addressList"
            :key="address.id"
            class="address-item"
            :class="{ 'selected': selectedAddressId === address.id }"
            @click="selectAddress(address)"
          >
            <div class="address-content">
              <div class="recipient">
                <span class="name">{{ address.name }}</span>
                <span class="phone">{{ formatPhone(address.phonenumber) }}</span>
              </div>
              <div class="location">
                <i class="fa fa-map-marker"></i>
                <span>{{ address.levelOneName }}{{ address.levelTwoName }}{{
                    address.levelThreeName
                  }}{{ address.levelFourName }}{{ address.address }}</span>
              </div>
            </div>
            <div class="check-icon" v-if="selectedAddressId === address.id">
              <i class="fa fa-check-circle"></i>
            </div>
          </div>
        </div>

        <!-- 添加新地址按钮 -->
        <button class="add-address-btn" @click="addNewAddress">
          <i class="fa fa-plus"></i> 添加新地址
        </button>
      </div>

      <div class="modal-footer">
        <button class="confirm-btn" @click="confirmAddressSelection">
          确认选择
        </button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'UserAddress',
  props: {
    userId: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      // 模拟地址数据
      addressList: [
        {
          id: 1,
          userId: 100,
          levelOneName: '河北省',
          levelTwoName: '石家庄市',
          levelThreeName: '行唐县',
          levelFourName: '龙州镇',
          address: '玉兴街90号',
          name: '张三',
          phonenumber: '15121850906',
          isDefault: true
        },
        {
          id: 2,
          userId: 100,
          levelOneName: '广东省',
          levelTwoName: '深圳市',
          levelThreeName: '南山区',
          levelFourName: '科技园',
          address: '科技大道10号',
          name: '李四',
          phonenumber: '13812345678',
          isDefault: false
        },
        {
          id: 3,
          userId: 100,
          levelOneName: '北京市',
          levelTwoName: '北京市',
          levelThreeName: '朝阳区',
          levelFourName: '三里屯',
          address: '太古里南区S4-30',
          name: '王五',
          phonenumber: '13901234567',
          isDefault: false
        }
      ],

      // 模态框状态
      isAddressModalVisible: false,

      // 当前选中的地址ID
      selectedAddressId: null,

      // 当前选中的地址对象
      selectedAddress: null
    }
  },

  created() {
    // 初始化时选择默认地址
    this.selectDefaultAddress()
  },

  methods: {
    // 格式化手机号
    formatPhone(phone) {
      if (!phone) return ''
      return phone.replace(/(\d{3})(\d{4})(\d{4})/, '$1 **** $3')
    },

    // 显示地址选择模态框
    showAddressModal() {
      this.isAddressModalVisible = true
    },

    // 关闭地址选择模态框
    closeAddressModal() {
      this.isAddressModalVisible = false
    },

    // 选择地址
    selectAddress(address) {
      this.selectedAddressId = address.id
      this.selectedAddress = address
    },

    // 确认地址选择
    confirmAddressSelection() {
      if (this.selectedAddressId) {
        this.isAddressModalVisible = false
      }
    },

    // 选择默认地址
    selectDefaultAddress() {
      const defaultAddress = this.addressList.find(address => address.isDefault)
      if (defaultAddress) {
        this.selectAddress(defaultAddress)
      }
    },

    // 添加新地址（模拟方法）
    addNewAddress() {
      alert('添加新地址功能将在后续版本实现')
    }
  }
}
</script>

<style scoped>
/* 基础样式 */
.app-container {
  font-family: 'Inter', sans-serif;
  background-color: #f8fafc;
  min-height: 100vh;
  padding: 20px;
}

.content {
  max-width: 800px;
  margin: 0 auto;
  background-color: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

h1 {
  font-size: 24px;
  color: #1e293b;
  margin-bottom: 20px;
}

/* 地址选择区域 */
.address-section {
  margin-bottom: 30px;
}

h3 {
  font-size: 18px;
  font-weight: 500;
  color: #334155;
  margin-bottom: 16px;
}

.current-address {
  background-color: #f8fafc;
  border-radius: 10px;
  padding: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.current-address:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.recipient-info {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 8px;
}

.name {
  font-size: 16px;
  font-weight: 500;
  color: #1e293b;
}

.phone {
  font-size: 15px;
  color: #64748b;
}

.address-details {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #475569;
  font-size: 15px;
}

.empty-address {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #94a3b8;
}

/* 地址模态框 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
}

.address-modal {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  max-height: 80vh;
  background-color: white;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
  z-index: 1001;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

.address-modal.active {
  transform: translateY(0);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #f1f5f9;
}

.modal-header h3 {
  font-size: 20px;
  font-weight: 600;
  color: #1e293b;
  margin: 0;
}

.close-btn {
  background: none;
  border: none;
  font-size: 20px;
  color: #64748b;
  cursor: pointer;
}

.modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

/* 地址列表 */
.address-list {
  margin-bottom: 20px;
}

.address-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid #f1f5f9;
  cursor: pointer;
}

.address-item.selected {
  background-color: #f5f8ff;
}

.address-content {
  flex: 1;
}

.recipient {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 8px;
}

.location {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #475569;
  font-size: 15px;
}

.check-icon {
  color: #165DFF;
  font-size: 18px;
  margin-left: 16px;
}

.add-address-btn {
  width: 100%;
  padding: 14px;
  background-color: white;
  border: 1px solid #165DFF;
  border-radius: 8px;
  color: #165DFF;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
}

.modal-footer {
  padding: 20px;
  border-top: 1px solid #f1f5f9;
}

.confirm-btn {
  width: 100%;
  padding: 14px;
  background-color: #165DFF;
  border: none;
  border-radius: 8px;
  color: white;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
}
</style>
